@import './variable.scss';
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

:root {
  --danger-color: #F56C6C;
}

//::-webkit-scrollbar {
//  width: 8px;
//  height: 8px;
//  border-radius: 10px;
//  background-color: #F5F5F5;
//}
//
//::-webkit-scrollbar-thumb {
//  border-radius: 10px;
//  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
//  //background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44,rgb(60,186,146)),color-stop(0.72,rgb(253,187,45)),color-stop(0.86,rgb(253,187,45)));
//  background-color: rgba(144, 147, 153, .3);
//  transition: 0.3s ease-in-out;
//}
//
//::-webkit-scrollbar-track {
//  border-radius: 10px;
//  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
//  background-color: #F5F5F5;
//}

.scrollbar {
  width: 100%;
  height: 100%;

  .scrollbar-wrapper {
    overflow-x: hidden;
  }
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.display-block {
  display: block !important;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.direction-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.text-decoration-none {
  text-decoration: none;
}

.margin {
  margin: $gutter;
}

.padding {
  padding: $gutter;
}

.padding-vertical {
  padding-top: $gutter;
  padding-bottom: $gutter;
}

.padding-horizontal {
  padding-left: $gutter;
  padding-right: $gutter;
}

.margin-vertical {
  margin-top: $gutter;
  margin-bottom: $gutter;
}

.margin-horizontal {
  margin-left: $gutter;
  margin-right: $gutter;
}

.color-inherit {
  color: inherit;
}

.width-100 {
  width: 100%;

  &.el-date-editor.el-input,
  &.el-date-editor.el-input__inner {
    width: 100%;
  }
}

.height-100 {
  height: 100%;
}

.bg-white {
  background: white;
}

.text-gray {
  color: gray;
}

$directions: top right bottom left;
@each $direction in $directions {
  .margin-#{$direction} {
    margin-#{$direction}: $gutter;
  }
  .padding-#{$direction} {
    padding-#{$direction}: $gutter;
  }
  .margin-#{$direction}-10 {
    margin-#{$direction}: 10px;
  }
  .padding-#{$direction}-10 {
    padding-#{$direction}: 10px;
  }
  .margin-#{$direction}-5 {
    margin-#{$direction}: 5px;
  }
  .margin-#{$direction}-0 {
    margin-#{$direction}: 0;
  }
  .padding-#{$direction}-5 {
    padding-#{$direction}: 5px;
  }
  .padding-#{$direction}-0 {
    padding-#{$direction}: 0;
  }
}

$sizes: 0 10 15 20;
@each $size in $sizes {
  .margin-#{$size} {
    margin: #{$size}px;
  }
  .padding-#{$size} {
    padding: #{$size}px;
  }

  .margin-vertical-#{$size} {
    margin-top: #{$size}px;
    margin-bottom: #{$size}px;
  }
  .margin-horizontal-#{$size} {
    margin-left: #{$size}px;
    margin-right: #{$size}px;
  }
  .padding-vertical-#{$size} {
    padding-top: #{$size}px;
    padding-bottom: #{$size}px;
  }
  .padding-horizontal-#{$size} {
    padding-left: #{$size}px;
    padding-right: #{$size}px;
  }
}

$font-sizes: (normal, 14px), (large, 16px), (xlarge, 18px), (small, 12px), (xsmall, 10px);
@each $font, $size in $font-sizes {
  .font-#{$font} {
    font-size: $size;
  }
}

.button-group {
  text-align: left;
  margin-bottom: $gutter;
}

.search-form.bottom-0 {
  .el-form-item {
    margin-bottom: 0;
  }
}

.info-title {
  line-height: 1;
  font-weight: 600;
  box-sizing: border-box;
  padding: 20px $gutter 10px;
}

.border-box {
  box-sizing: border-box;
}

.border-radius {
  border-radius: 4px;
}

.amap-logo {
  opacity: 0;
}

$left-tree-width: 300px;
.content-with-tree {
  .left-tree {
    width: $left-tree-width;
    height: 100%;
    background: white;
    flex-shrink: 0;
    border-radius: .3em;
    margin-right: $gutter;
  }

  .right-content {
    flex: 1;
    width: calc(100% - $gutter - $left-tree-width);
  }
  @media screen and (max-width: 1600px) {
    .left-tree {
      width: $left-tree-width / 1.3;
    }
  }
  @media screen and (max-width: 1330px) {
    .left-tree {
      width: $left-tree-width / 1.5;
    }
  }
}

.pagination {
  margin-top: $gutter;
  text-align: right;
}

.table.el-table:before {
  display: none;
}

.column-image {
  width: 40px;
  height: 40px;
}

.empty-lists {
  padding: 10em 5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #dbdbdb;

  .svg-icon {
    font-size: 40px;
  }

  .empty-text {
    line-height: 40px;
  }
}

.form-box {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

.form-box .el-form-item {
  @media screen and (min-width: 1400px) {
    float: left;
    width: 50%;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.el-tooltip__popper {
  max-width: 360px;
  line-height: 1.6;
}

.text-center {
  text-align: center;
}
.is-collapsed {
  .layout-menu .menu-icon {
    font-size: 1.5em !important;
    color: #666666;
  }
}

.overflow-auto {
  overflow: auto;
}
.position-relative {
  position: relative;
}
.overview-item {
  .item-icon {
    display: none;
  }
}
.fixed-page {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1111;
  //background: radial-gradient(#1a56c3, #0c1b58);
  background: #0c1b58;
  padding: 1rem;
  overflow: auto;

  .back-button {
    font-size: 1.2rem;
    margin: 1rem .4rem 1rem 0;
  }
}
.visual-page {
  color: var(--theme-color-light);
  .el-input__inner {
    background: transparent;
    color: inherit;
    border-color: var(--theme-color-light);
  }
  .el-range-input {
    background: transparent;
  }
  .el-form-item__label {
    color: inherit;
  }
}
.tooltip-table {
  border: 1px solid;
  width: 100%;
  td {
    border: 1px solid;
    font-size: 11px;
    padding: 3px 6px;
  }
}
.overlay-page {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  background: #fff;
}
.popper-marker {
  background: white;
  border-radius: .3em;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.2);
  position: relative;
  $border-width: 12px;
  &::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: $border-width solid white;
    border-left: $border-width solid transparent;
    border-right: $border-width solid transparent;
    position: absolute;
    margin-top: -1px;
    margin-left: -$border-width;
    top: 100%;
    left: 50%;
  }
  &::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--danger-color);
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    margin-top: $border-width;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,0.2);
  }
}
